<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/index/css/style.css"/>
    <script type="text/javascript" src="__STATIC__/index/js/rem.js"></script>
    <title>登录</title>
</head>
<body>
<div class="query">
    <!--背景图片-->
    <div class="query_img">
        <img class="auto-img" src="__STATIC__/index/img/logo.png"/>
    </div>
    <!--手机号码-->
    <div class="query_login">
        <label>
            <input type="tel" name="phone" placeholder="请输入您的手机号码" maxlength="11"/>
        </label>
    </div>
    <!--验证码-->
    <div class="query_code clear">
        <input class="fl" type="text" name="" placeholder="请输入验证码"/>
        <button class="fr">获取验证码</button>
    </div>
    <!--提交查询按钮-->
    <div class="query_btn">登录</div>
    <script type="text/javascript" src="__STATIC__/index/js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="__STATIC__/index/js/layer/layer.js"></script>
    <script type="text/javascript">
        //点击获取验证码
        var wait = 60;

        function time() {
            if (wait == 0) {
                $('.query_code button').attr("disabled",false);
                $('.query_code button').html("获取验证码");
                wait = 60;
            } else {
                $('.query_code button').attr("disabled", true);
                $('.query_code button').html("重新获取(" + wait + ")S");
                wait--;
                setTimeout(function () {
                    time()
                }, 1000)
            }
        }

        $('.query_code button').on('click', function () {
            var phone = $('input[name="phone"]').val();
            if (is_phone(phone)) {
                $.ajax({
                    url: "/index/login/getCode",
                    type: "post",
                    data: {phone: phone},
                    success: function (res) {
                        if(res.code=='ok'){
                            layer.msg('发送成功，请留意短信',{time:2000});
                            time();
                        }else {
                            layer.msg(res.msg,{time:2000});
                        }
                    }
                })
            }else {
                layer.msg('请输入正确的手机号');
            }
        });

        //点击登录查询
        $('.query_btn').on('click', function () {
            var phone = $('.query_login input').val();
            var code = $('.query_code input').val();
            if ($('.query_login input').val() == '') {
                layer.msg('手机号码不能为空', {time: 1000})
            } else if ($('.query_code input').val() == '') {
                layer.msg('验证码不能为空', {time: 1000})
            } else {
                $.ajax({
                    url:"login",
                    type:'post',
                    data:{phone:phone,code:code},
                    success:function (res) {
                        if(res.code=='ok'){
                            layer.msg('登陆成功',{time: 1000},function () {
                                window.location.href = res.msg;
                            })
                        }else if (res.code=='error'){
                            layer.msg(res.msg,{time:2000})
                        }
                    }
                })
            }
        })

        //验证是否为手机号码
        function is_phone(phone) {
            var myreg = /^1(3|4|5|7|8)\d{9}$/;
            if (!myreg.test(phone)) {
                return false;
            }
            return true;
        }
    </script>
</body>
</html>